<template>
  <section>
    <!--    <el-select v-model="value" placeholder="请选择" @change="handleChange">-->
    <!--      <el-option-group-->
    <!--        v-for="group in options4all"-->
    <!--        :key="group.label"-->
    <!--        :label="group.label"-->
    <!--      >-->
    <!--        <el-option-->
    <!--          v-for="item in group.options"-->
    <!--          :key="item.code"-->
    <!--          :label="item.name"-->
    <!--          :value="item.code"-->
    <!--        />-->
    <!--      </el-option-group>-->
    <!--    </el-select>-->
    <el-select v-model="value" @change="handleChange" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.code"
          :label="getName(item) "
          :value="item.code"
      />
    </el-select>
  </section>
</template>
<script>
import mixins from './../mixins'
import { getVar } from '@/components/CustomPage/apps/widget/mixins'
export default {
  name: 'SelectGroup4var',
  mixins: [mixins],
  inject: ['comps', 'focusId', 'focusName', 'getListItemInfo', 'pageVar'],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      options4all: [
        {
          label: '页面变量',
          options: []
        },
        {
          label: '组件变量',
          options: [{
            code: 'Chengdu',
            name: '成都'
          }, {
            code: 'Shenzhen',
            name: '深圳'
          }, {
            code: 'Guangzhou',
            name: '广州'
          }, {
            code: 'Dalian',
            name: '大连'
          }]
        }],
      options: []
    }
  },
  computed: {
    filterable() {
      return this.option.filterable
    },
    _pageVar() {
      return this.pageVar()
    }
  },
  watch: {
    _pageVar: {
      handler(val) {
        const com = this.getListItemInfo(this.focusName())?.componentVariable ? JSON.parse(this.getListItemInfo(this.focusName()).componentVariable) : []
        this.options = [...val, ...com]
      },
      deep: true
    }
  },
  created() {
    const com = this.getListItemInfo(this.focusName())?.componentVariable ? JSON.parse(this.getListItemInfo(this.focusName()).componentVariable) : []
    this.options = [...this.pageVar(), ...com]
    // this.options4all[0].options = this.pageVar()
    // this.options4all[1].options = this.getListItemInfo(this.focusName())?.componentVariable ? JSON.parse(this.getListItemInfo(this.focusName()).componentVariable) : []
  },
  methods: {
    getName(item) {
      const before = getVar(item.code, 0) === 'route' ? '（页面变量）' : '（组件变量）'
      return before + item.name
    },
    getValue() {
      return this.value
    },

    setValue(k) {
      this.$set(this, 'value', k)
    },

    setCheck() {
      let { value, required } = this
      let error = false; let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange(e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
